<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">-->
<title>在线预约保养系统</title>

<link rel="stylesheet" href="css/split-pane.css" />
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.css">

<style type="text/css">
html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    box-sizing: border-box;
    background: #fff;
    padding: 1px;
}
.split-pane-divider {
    background: #eee;
}
.split-pane-component {
    background: #fff; 
}
.data-split-pane-component{   
    overflow:hidden;
}
</style>

</head> 
<body data-ng-app="myApp" ng-cloak class="ng-cloak" onload="init()" > 
<div data-split-pane>
    <div data-split-pane-component  data-height="90px">
        <div class="pretty-split-pane-component-inner"><div >
                <div class="spacer" style="width:10px;height:20px"></div>
                <h1>在线预约保养系统</h1>
            </div>
        </div>
    </div>
    <div data-split-pane-divider data-height="1px"></div>
    <div data-split-pane-component >
        <div data-split-pane >
            <div data-split-pane-component  data-width="250px" style ="overflow: hidden ">
                <div data-split-pane>
                    <div data-split-pane-component >
                        <div class="pretty-split-pane-component-inner" >          <div class="imgdiv">

                                <img src="newyork.jpg" class="img-circle" width="200" height="155">

                            </div>

                            <div ng-controller="user">
                                <table class="table">
                                    <tr>
                                        <td> <strong>用户名</strong></td>
                                        <td>{{userName}}</td>
                                    </tr>
                                    <tr>
                                        <td><strong>手机号</strong></td>
                                        <td>{{phone}}</td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </table>
                            </div> 

                            <h3>我的车库</h3>

                            <div ng-controller="userCars">
                                <table class ="table table-hover">
                                    <thead>
                                        <tr> 
                                            <th>选择</th>
                                            <th>品牌</th>
                                            <th>型号</th>
                                            <th>排量</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    <tr ng-repeat="x in cars">
                                        <td>
                                            <input type="radio" name="switch-radio1" ng-value="true" ng-model="x.selected" ng-change="onCarSelect(x,cars)" />
                                        </td>
                                        <td>{{x.factoryId}}</td>
                                        <td>{{x.carNAME}}</td>
                                        <td>{{x.carSIZE}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>

                        </div> 
                    </div>
                    <div data-split-pane-divider data-height="1px"></div>
                    <div data-split-pane-component  data-height="40px">
                        <div class="pretty-split-pane-component-inner">  <div class="pretty-split-pane-component-inner">
                                <button id="showorders" type="button" class="btn btn-primary btn-block" onclick="redirectToOrderlist()">查看订单列表>></button>
                        </div></div>
                    </div>
                </div>
            </div>

            <div data-split-pane-divider data-width="1px"></div>
            <div data-split-pane-component>
                <div class="pretty-split-pane-component-inner"><div id="rcp1_map"  style="width: 100%;height: 100%;position:absolute;top:0;left:0"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/split-pane.js"></script>
<script src="js/angular-split-pane.js"></script>
<script src="js/app.js"></script>  
<script type="text/javascript" src="http://www.openlayers.cn/olapi/OpenLayers.js"></script>        
<script src="js/map.js"></script>

<script>
var g_UserID="1";
var g_UserName="车式仁";
var g_CarID="1";
var g_CarName="C2";
var g_CarFactory="东风雪铁龙";
var g_SelectedCarstore= {orderTime:"",storeId:"",carID:"",userId:""}; 
localStorage.setItem("userId",g_UserID);
    
angular.module('myApp', ['shagstrom.angular-split-pane']).controller('user', function($scope,$http) {
        $http.get("userserver/getuserbyid?UserId="+g_UserID).then(function(response){
            var user=response.data[0];
            $scope.userId=user.userId;
            $scope.userName=user.userName;
            $scope.phone=user.phone;
        });
    })
 .controller('userCars', function($scope,$http) {
        $http.get("userserver/carsbyuser?UserId="+g_UserID).then(function(response){
            $scope.cars=response.data;
            console.log(response.data);
            //$scope.cars=JSON.parse('[{"Id":1,"factoryId":"湖北永大帝豪4S店","carNAME":"富康","carSIZE":2.0},{"Id":2,"factoryId":"三环盛通汽车有限公司中华轿车4s店","carNAME":"轩逸","carSIZE":3.0}]');
        });
        $scope.onCarSelect=function(x,cars){
            cars.forEach(function(e){e.selected=false;});
            x.selected=true;
            g_CarID=x.id;
            g_CarName=x.carNAME;
            g_CarFactory=x.factoryId;
            
             //save status
             $http.post("/userserver/updatecarstatus?UserId="+g_UserID+"&CarId="+x.id).then(function(response){
             console.log("汽车选择状态更新成功！");  
             });            
            console.log(x.factoryId);
            //console.log(x.id+" changed!");
        }
    }
    )
</script>
</body>
</html>
